<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
      <!-- <el-form-item label="用户ID" prop="userId">
        <el-input
          v-model="queryParams.userId"
          placeholder="请输入用户ID"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item> -->
      <el-form-item label="企业名称" prop="companyName">
        <el-input v-model="queryParams.companyName" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery"
          class="!w-240px" />
      </el-form-item>
      <!-- <el-form-item label="手机号" prop="phoneNumber">
        <el-input
          v-model="queryParams.phoneNumber"
          placeholder="请输入手机号"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item> -->
      <!-- <el-form-item label="认证类型" prop="authType">
        <el-select
          v-model="queryParams.authType"
          placeholder="请选择认证类型"
          clearable
          class="!w-240px"
        >
          <el-option label="个人认证" :value="1" />
          <el-option label="企业认证" :value="2" />
        </el-select>
      </el-form-item> -->
      <!-- 0未认证 1认证中 2已认证 3认证失败 -->
      <el-form-item label="认证状态" prop="verificationStatus">
        <el-select v-model="queryParams.verificationStatus" placeholder="请选择认证状态" clearable class="!w-240px">
          <el-option label="未认证" :value="0" />
          <el-option label="认证中" :value="1" />
          <el-option label="已认证" :value="2" />
          <el-option label="认证失败" :value="3" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange"
          start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-240px" />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px" /> 搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px" /> 重置
        </el-button>
        <!-- <el-button
          type="primary"
          plain
          @click="openForm('create')"
          v-hasPermi="['weiyi:account-auth:create']"
        >
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
          type="success"
          plain
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['weiyi:account-auth:export']"
        >
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button> -->
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" style="width: 100%" border
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" :width="50" align="center" />
      <el-table-column label="ID" align="center" prop="userId" width="60" />
      <el-table-column label="联系人姓名" align="center" prop="contactName" min-width="100" />
      <el-table-column label="企业名称" align="center" prop="companyName" min-width="100" />
      <el-table-column label="手机号" align="center" prop="contactMobile" min-width="120" />
      <el-table-column label="统一社会信用代码" align="center" prop="socialCreditCode" min-width="120" />
      <!-- <el-table-column label="法人身份证正面URL" align="center" prop="legalPersonIdCardFront" min-width="120" /> -->
      <!-- <el-table-column label="法人身份证反面URL" align="center" prop="legalPersonIdCardBack" min-width="120" /> -->
      <!-- <el-table-column label="营业执照URL" align="center" prop="businessLicenseUrl" min-width="120" /> -->
      <el-table-column label="营业执照到期日期" align="center" prop="businessLicenseExpireDate" min-width="120" >
        <template #default="scope">
          <div>
            {{ handleBusinessLicenseExpireDate(scope.row.businessLicenseExpireDate) }}
          </div>
          <!-- <div v-else class="text-gray-400">未上传</div> -->
        </template>
       
      </el-table-column>
      <el-table-column label="注册地址" align="center" prop="registrationAddress" min-width="120" />
      <el-table-column label="开户行" align="center" prop="bankName" min-width="120" />
      <el-table-column label="分行" align="center" prop="bankBranch" min-width="120" />
      <!-- <el-table-column label="认证状态" align="center" prop="authType" width="100">
        <template #default="{ row }">
          <el-tag :type="row.authType === 1 ? 'primary' : 'success'">
            {{ row.authType === 1 ? '个人认证' : '企业认证' }}
          </el-tag>
        </template>
</el-table-column> -->
      <!-- <el-table-column label="公司信息" align="center" min-width="120">
        <template #default="{ row }">
          <div v-if="row.authType === 2">
            <div>{{ row.companyName || '-' }}</div>
            <div class="text-gray-500 text-sm">{{ row.position || '-' }}</div>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column> -->
      <el-table-column label="认证状态" align="center" prop="verificationStatus" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.verificationStatus)">{{ getStatusText(row.verificationStatus) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="170" />
      <!-- <el-table-column
        label="认证时间"
        align="center"
        prop="authTime"
        :formatter="dateFormatter"
        width="170"
      /> -->
      <el-table-column label="操作" align="center" width="200" fixed="right">
        <template #default="scope">
          <el-button link type="primary" @click="openForm('update', scope.row.id)"
            v-hasPermi="['weiyi:account-auth:update']">
            编辑
          </el-button>
          <el-button link type="danger" @click="handleDeleteAd(scope.row.id)" v-hasPermi="['weiyi:account-auth:delete']">
            删除
          </el-button>
          <el-button link type="success"
            @click="openApproveDialog(scope.row, 'update')" v-hasPermi="['weiyi:account-auth:update']">
            审批
          </el-button>
          <el-button link type="info"
            @click="openApproveDialog(scope.row, 'detail')" v-hasPermi="['weiyi:account-auth:detail']">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 批量操作 -->
    <div class="mt-10px mb-10px flex items-center" v-if="selectedIds.length > 0">
      <span class="mr-10px">已选择 {{ selectedIds.length }} 项</span>
      <el-button type="primary" size="small" @click="openBatchApproveDialog" v-hasPermi="['weiyi:account-auth:update']">
        批量审批
      </el-button>
      <el-button type="danger" size="small" @click="handleBatchDelete" v-hasPermi="['weiyi:account-auth:delete']">
        批量删除
      </el-button>
    </div>

    <!-- 分页 -->
    <Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getList" />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <AccountAuthForm ref="formRef" @success="getList" />

  <!-- 审批弹窗 -->
  <el-dialog v-model="approveDialogVisible" title="账户认证审批" width="600px" destroy-on-close>
    <div v-if="currentAuth" v-loading="detailLoading">
      <el-tabs>
        <el-tab-pane label="基本信息">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户ID" :span="2">{{ currentAuth.userId }}</el-descriptions-item>
            <el-descriptions-item label="企业名称">{{ currentAuth.companyName }}</el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">{{ currentAuth.socialCreditCode }}</el-descriptions-item>
            <el-descriptions-item label="营业执照到期日期">{{
              handleBusinessLicenseExpireDate(currentAuth.businessLicenseExpireDate) }}</el-descriptions-item>
            <el-descriptions-item label="注册地址">{{ currentAuth.registrationAddress || '-' }}</el-descriptions-item>
            <el-descriptions-item label="开户行">{{ currentAuth.bankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="分行">{{ currentAuth.bankBranch || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行卡号">{{ currentAuth.bankAccountNumber || '-' }}</el-descriptions-item>
            <el-descriptions-item label="联系人姓名">{{ currentAuth.contactName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="联系人手机号码">{{ currentAuth.contactMobile || '-' }}</el-descriptions-item>
            <el-descriptions-item label="联系人邮箱">{{ currentAuth.contactEmail || '-' }}</el-descriptions-item>
            <el-descriptions-item label="办公地址">{{ currentAuth.officeAddress || '-' }}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{ currentAuth.detailedAddress || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合同编号">{{ currentAuth.contractNumber || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合同PDF URL">
              <el-button link type="primary" @click="viewContractDetails(currentAuth.contractPdfUrl)">
                查看详情
              </el-button>
              <!-- {{ currentAuth.contractPdfUrl || '-' }} -->
            </el-descriptions-item>

            <!-- <template v-if="currentAuth.authType === 2">
              <el-descriptions-item label="公司名称" :span="2">{{ currentAuth.companyName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="职位" :span="2">{{ currentAuth.position || '-' }}</el-descriptions-item>
            </template> -->
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="证件信息">
          <div class="grid grid-cols-1 gap-4">
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div class="mb-2 font-bold">法人身份证正面URL</div>
                <el-image v-if="currentAuth.legalPersonIdCardFront" :src="currentAuth.legalPersonIdCardFront"
                  :preview-src-list="[currentAuth.legalPersonIdCardFront]" fit="contain"
                  style="width: 100%; max-height: 150px" />
                <div v-else class="text-gray-400">未上传</div>
              </div>
              <div>
                <div class="mb-2 font-bold">法人身份证反面URL</div>
                <el-image v-if="currentAuth.legalPersonIdCardBack" :src="currentAuth.legalPersonIdCardBack"
                  :preview-src-list="[currentAuth.legalPersonIdCardBack]" fit="contain"
                  style="width: 100%; max-height: 150px" />
                <div v-else class="text-gray-400">未上传</div>
              </div>
            </div>
            <!-- 联系人身份证正面URL -->
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div class="mb-2 font-bold">联系人身份证正面URL</div>
                <el-image v-if="currentAuth.contactIdCardFront" :src="currentAuth.contactIdCardFront"
                  :preview-src-list="[currentAuth.contactIdCardFront]" fit="contain"
                  style="width: 100%; max-height: 150px" />
                <div v-else class="text-gray-400">未上传</div>
              </div>
              <div>
                <div class="mb-2 font-bold">联系人身份证反面URL</div>
                <el-image v-if="currentAuth.contactIdCardBack" :src="currentAuth.contactIdCardBack"
                  :preview-src-list="[currentAuth.contactIdCardBack]" fit="contain"
                  style="width: 100%; max-height: 150px" />
                <div v-else class="text-gray-400">未上传</div>
              </div>
            </div>
            <!-- 营业执照URL -->
            <div class="grid grid-cols-2 gap-4">
              <div>
                <div class="mb-2 font-bold">营业执照URL</div>
                <el-image v-if="currentAuth.businessLicenseUrl" :src="currentAuth.businessLicenseUrl"
                  :preview-src-list="[currentAuth.businessLicenseUrl]" fit="contain"
                  style="width: 100%; max-height: 150px" />
                <div v-else class="text-gray-400">未上传</div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="证件信息">
          <el-form :model="approveForm" label-width="100px" class="mt-4">
            <!-- <el-form-item label="广告主ID列表" prop="advertiserIds">
          {{ approveForm.advertiserIds.split(',') }}
          <el-select
            v-model="selectAdvertiserIds"
            multiple
            filterable
            allow-create
            default-first-option
            placeholder="请输入或选择广告主ID"
            class="!w-full"
          >
            <el-option
              v-for="id in approveForm.advertiserIds.split(',')"
              :key="id"
              :label="id"
              :value="id"
            />
          </el-select>
          <div class="text-gray-500 text-sm mt-1">
            <Icon icon="ep:info-filled" class="mr-1" />
            可以直接输入广告主ID,支持添加多个
          </div>
        </el-form-item> -->
            <!-- {{ formDataAdvertiserIds }} -->
            <el-form ref="formRefApprove" :model="formDataAdvertiserIds" :rules="formRules" label-width="0px"
              :inline-message="true">
              <el-table :data="formDataAdvertiserIds" style="width: 100%">
                <el-table-column type="index" label="序号" width="90" />
                <el-table-column prop="advertiserId" label="广告主ID">
                  <template #default="{ row , $index }">
                    <el-form-item :prop="`${$index}.advertiserId`" :rules="formRules.advertiserId" class="mb-0px!">
                      <el-input v-model="row.advertiserId" placeholder="请输入广告主ID" type="number" :disabled="isDetail === 'detail'"/>
                    </el-form-item>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="120" v-if="isDetail === 'update'">
                  <template #default="{ $index }">
                    <el-button type="danger" @click="handleDeleteModus($index)" link>删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-form>
            <el-row justify="center" class="mt-3" v-if="isDetail === 'update'">
              <el-button @click="handleAdd" round>+ 添加广告主ID</el-button>
            </el-row>
            <!-- 审批结果 -->
            <el-form-item label="审批结果" required>
              <el-radio-group v-model="approveForm.verificationStatus"  :disabled="isDetail === 'detail'">
                <el-radio :label="1" v-if="isDetail==='detail'">待审核</el-radio>
                <el-radio :label="2">通过</el-radio>
                <el-radio :label="3">拒绝</el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 审批备注 -->
            <el-form-item label="审批备注">
              <el-input v-model="approveForm.auditRemark" type="textarea" :rows="3" placeholder="请输入审批备注"  :disabled="isDetail === 'detail'"/>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-divider />


    </div>

    <template #footer>
      <el-button @click="approveDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleApprove" :loading="approveLoading">确认</el-button>
    </template>
  </el-dialog>

  <!-- 批量审批弹窗 -->
  <el-dialog v-model="batchApproveDialogVisible" title="批量审批" width="500px" destroy-on-close>
    <el-form :model="batchApproveForm" label-width="100px">
      <el-form-item label="审批结果" required>
        <el-radio-group v-model="batchApproveForm.verificationStatus">
          <el-radio :label="1">通过</el-radio>
          <el-radio :label="2">拒绝</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="审批备注">
        <el-input v-model="batchApproveForm.auditRemark" type="textarea" :rows="3" placeholder="请输入批量审批备注" />
      </el-form-item>

      <el-alert type="info" :closable="false">
        您正在对 {{ selectedIds.length }} 条记录进行批量审批操作
      </el-alert>
    </el-form>

    <template #footer>
      <el-button @click="batchApproveDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleBatchApprove" :loading="batchApproveLoading">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, unref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { AccountAuthApi } from '@/api/weiyi/accountauth'
import AccountAuthForm from './AccountAuthForm.vue'
import { dateFormatter } from '@/utils/formatTime'
import { useMessage } from '@/hooks/web/useMessage'

const message = useMessage() // 消息提示
const loading = ref(false) // 列表加载状态
const total = ref(0) // 列表总数
const list = ref([]) // 列表数据
const queryParams = ref({ // 查询参数
  pageNo: 1,
  pageSize: 10,
  // userId: undefined, // 用户ID
  companyName: undefined,
  // phoneNumber: undefined,
  // authType: undefined,
  verificationStatus: undefined,
  createTime: []
})
const queryFormRef = ref() // 查询表单
const formRef = ref() // 表单
const exportLoading = ref(false) // 导出状态

// 表格选择行相关
const selectedIds = ref<number[]>([])
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => item.id)
}

// 审批弹窗相关
const approveDialogVisible = ref(false)
const detailLoading = ref(false)
const currentAuth = ref(null)
const approveForm = ref({
  id: undefined,
  verificationStatus: 2,
  auditRemark: '',
  // advertiserIds: [] as number[] // 添加广告主ID列表字段
})
const formDataAdvertiserIds = ref([]) // 选择的广告主ID列表
const formRefApprove = ref() // 表单 Ref
const formRules = reactive({
  advertiserId: [{ required: true, message: '广告主ID不能为空', trigger: 'blur' }],
})


const approveLoading = ref(false)

// 批量审批弹窗相关
const batchApproveDialogVisible = ref(false)
const batchApproveForm = ref({
  ids: [] as number[],
  verificationStatus: 1,
  auditRemark: ''
})
const batchApproveLoading = ref(false)

// 区分审批和详情
const isDetail = ref('update') // 默认是审批

/** 查询列表 */
const getList = async () => {
  try {
    loading.value = true
    // 处理时间范围
    // const params = { ...unref(queryParams) }
    // if (params.createTime && params.createTime.length > 0) {
    //   params.beginCreateTime = params.createTime[0]
    //   params.endCreateTime = params.createTime[1]
    // }
    // delete params.createTime
    // console.log('queryParams', queryParams.value);
    let data = await AccountAuthApi.getAccountAuthPage(queryParams.value)
    // console.log('data', data);
    // const  { list, total } = data
    // console.log('list', list);
    // console.log('total', total);
    list.value = data.list
    total.value = data.total
  } catch (error) {
    console.error('获取列表失败:', error)
  } finally {
    loading.value = false
  }
}

/** 搜索 */
const handleQuery = () => {
  queryParams.value.pageNo = 1
  getList()
}

/** 重置搜索条件 */
const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
}

/** 打开表单弹窗 */
const openForm = (type: string, id?: number) => {
  // 'update', scope.row.id  
  // update 1
  console.log(type, id);
  console.log(formRef.value);


  formRef.value?.open(type, id)
}

/** 导出 */
const handleExport = async () => {
  try {
    exportLoading.value = true
    await AccountAuthApi.exportAccountAuth(queryParams.value)
  } catch (error) {
    console.error('导出失败:', error)
  } finally {
    exportLoading.value = false
  }
}

/** 删除 */
const handleDeleteAd = async (id: number) => {
  try {
    await ElMessageBox.confirm('是否确认删除该账户认证信息？', '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })

    await AccountAuthApi.deleteAccountAuth(id)
    message.success('删除成功')
    if (list.value.length === 1 && queryParams.value.pageNo > 1) {
      queryParams.value.pageNo--
    }
    await getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除失败:', error)
    }
  }
}

/** 批量删除 */
const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) {
    message.warning('请至少选择一条记录')
    return
  }

  try {
    await ElMessageBox.confirm(`是否确认删除这 ${selectedIds.value.length} 条账户认证信息？`, '提示', {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    })

    // 实际调用批量删除接口，这里简化为循环调用单个删除接口
    for (const id of selectedIds.value) {
      await AccountAuthApi.deleteAccountAuth(id)
    }

    message.success('批量删除成功')
    if (list.value.length === selectedIds.value.length && queryParams.value.pageNo > 1) {
      queryParams.value.pageNo--
    }
    selectedIds.value = []
    await getList()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
    }
  }
}

/** 打开审批弹窗 */
const openApproveDialog = async (row, val) => {
  isDetail.value = val
  try {
    detailLoading.value = true
    approveDialogVisible.value = true

    // 获取详情
    const data = await AccountAuthApi.getAccountAuth(row.id)
    // console.log('data===>', data);

    currentAuth.value = data
    console.log('currentAuth===>', data.advertiserIds);


    // 初始化审批表单
    approveForm.value = {
      id: data.id,
      verificationStatus: data.verificationStatus ||0,
      // advertiserIds: data.advertiserIds || [], // 初始化广告主ID列表
      auditRemark: data.auditRemark||'',

    }
    const ids = data.advertiserIds.split(',') || [] // 初始化选择的广告主ID列表
    const jsonArray = ids.map(id => ({
      id: id,
      advertiserId: id
    }));
    formDataAdvertiserIds.value = jsonArray
    console.log('formDataAdvertiserIds===>', formDataAdvertiserIds.value);

  } catch (error) {
    console.error('获取详情失败:', error)
    approveDialogVisible.value = false
  } finally {
    detailLoading.value = false
  }
}

/** 审批提交 */
const handleApprove = async () => {
   // 校验表单
   await formRefApprove.value.validate()

  if (isDetail.value === 'update') {
    if (!currentAuth.value) return

    try {
      approveLoading.value = true
      // console.log('approveForm.value', approveForm.value);
      const advertiserIds = formDataAdvertiserIds.value.map(item => item.advertiserId);
      const advertiserIdsString = advertiserIds.join(); 
      await AccountAuthApi.approveAccountAuth({...approveForm.value, advertiserIds: advertiserIdsString })
      message.success(approveForm.value.verificationStatus === 1 ? '审批通过成功' : '审批拒绝成功')
      approveDialogVisible.value = false
      // 刷新列表
      await getList()
    } catch (error) {
      console.error('审批失败:', error)
      message.error('审批失败')
    } finally {
      approveLoading.value = false
    }

  } else {
    approveDialogVisible.value = false
  }

}

/** 打开批量审批弹窗 */
const openBatchApproveDialog = () => {
  if (selectedIds.value.length === 0) {
    message.warning('请至少选择一条记录')
    return
  }

  batchApproveForm.value = {
    ids: selectedIds.value,
    verificationStatus: 1,
    auditRemark: ''
  }

  batchApproveDialogVisible.value = true
}

/** 批量审批提交 */
const handleBatchApprove = async () => {
  try {
    batchApproveLoading.value = true

    await AccountAuthApi.batchApproveAccountAuth(batchApproveForm.value)
    message.success(batchApproveForm.value.verificationStatus === 1 ? '批量审批通过成功' : '批量审批拒绝成功')
    batchApproveDialogVisible.value = false
    selectedIds.value = []
    // 刷新列表
    await getList()
  } catch (error) {
    console.error('批量审批失败:', error)
    message.error('批量审批失败')
  } finally {
    batchApproveLoading.value = false
  }
}

// 获取状态类型
const getStatusType = (status: number) => {
  switch (status) {
    case 1: return 'warning' // 待审核
    case 2: return 'success' // 已认证
    case 3: return 'danger'  // 未通过
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 1: return '待审核'
    case 2: return '已认证'
    case 3: return '未通过'
    default: return '未知'
  }
}

// 查看合同详情的逻辑
const viewContractDetails = (contractPdfUrl) => {
  window.open(contractPdfUrl, "_blank");
}

const handleBusinessLicenseExpireDate = (dateArray: [number, number, number]) => {
  const [year, month, day] = dateArray;
  const date = new Date(year, month - 1, day);
  // 使用 Intl 格式化（兼容性较好）
  const formattedDate = new Intl.DateTimeFormat('en-CA', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).format(date).replace(/\//g, '-');
  return formattedDate
}
/** 新增按钮操作 */
const handleAdd = () => {
  const row = {
    id: undefined,
    advertiserIds: undefined,
  }
  // row.studentId = props.studentId
  // formData.value.push(row)
  formDataAdvertiserIds.value.push(row)
}
/** 删除按钮操作 */
const handleDeleteModus = (index) => {
  // console.log('index', index);

  formDataAdvertiserIds.value.splice(index, 1)
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>

<style lang="scss" scoped>
.image-error {
  display: flex;
  width: 100%;
  height: 100%;
  font-size: 20px;
  color: #909399;
  background-color: #f5f7fa;
  justify-content: center;
  align-items: center;
}

.cursor-pointer {
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: scale(1.05);
  }
}

.text-xs {
  font-size: 12px;
}
</style>